<template>
	<view class="search">
		<u-row gutter="50">
			<u-col span="12">
				<u-search :focus="true" type="number" placeholder="请输入工程编号" @custom="searchClick" @search="searchClick" :clearabled="true" :show-action="true" action-text="搜索" :animation="true" v-model="searchData"></u-search>
		
				<view class="no-search" v-if="searchNoContent">
			  	<image src="../static/images/no-search.png" mode=""></image>
					<view class="tips">请检查输入的工程编号是否正确并且未结束</view>
			  </view>
				<view class="content" v-if="searchContent">
					<view class="list">
						<view>工程名称:<text>{{ searchInfo.projectName }}</text></view>
						<view>工程地址:<text>{{ searchInfo.projectAddr }}</text></view>
						<view>工程编号:<text>{{ searchInfo.projectNo }}</text></view>
						<view>创建时间:<text>{{ searchInfo.createTime }}</text></view>
					</view>
					<view class="butList">
						<u-button  v-if="searchInfo.projectType == null" class="but" type="primary" @click="joinProject" shape="circle">加入工程</u-button>
						<u-button v-if="searchInfo.projectType == 1 || searchInfo.projectType == 2"  class="but" type="primary" @click="seeProject" shape="circle">查看工程</u-button>
					</view>
				</view>
			</u-col>
		</u-row>
		<!-- 提示框 -->
		<u-toast ref="uToast" /> 
	</view>
</template>

<script>
	export default {
		name: 'search', 
		data() {
			return {
				searchInfo: {}, // 搜索内容数组
				searchData: '', // 搜索的内容
				searchNoContent: false, // 暂无图片的状态
				searchContent: false, // 有数据时候的状态
				show: true
			}
		},
		methods: {
			// 搜索工程
			searchClick() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.post({
					url: `/project-info/getByNo/${this.searchData}`,
					header: header
				}).then(res => {
					// console.log(res)
			    if(res.code == 200 && res.data != null) {
						this.searchContent = true
						this.searchNoContent = false
						this.searchInfo = res.data
					} else {
						this.searchNoContent = true
						this.searchContent = false
					}
				})
			},
			// 加入工程
			joinProject() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.post({
					url: `/project-info/${this.searchInfo.id}/join`,
					header: header
				}).then(res => {
					// console.log(res)
					if(res.code == 200) {
						this.$refs.uToast.show({
							title: '加入成功',
							type: 'success'
						})
						setTimeout(() => {
							this.$navJump.navigateTo('./projectDetails?idx=' + this.searchInfo.id)
						}, 500)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			// 查看工程
			seeProject() {
				this.$navJump.navigateTo('./projectDetails?idx=' + this.searchInfo.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		.no-search {
			margin-top: 80rpx;
			image {
				width: 100%;
				height: 461rpx;
			}
		}
		.content {
			margin-top: 40rpx;
			.list{
				padding: 0 20rpx ;
				font-size: 30rpx;
				color: #8C8C8C;
				view {
					margin-bottom: 20rpx;
				}
				text {
					color: #262626;
					margin-left: 20rpx;
				}
				view:nth-child(3) text {
					color: #3B85FE;
				}
			}
			
			.butList {
				padding: 40rpx 80rpx 0;
				/deep/.u-btn--primary{
					background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important
				}
			}
		}
	}
	.tips{
		color: #B1B1B1;
		text-align: center;
		width: 100%;
		margin-top: 10rpx;
	}
</style>
